<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="推送编号">
        <br />
        <br /><el-input
          v-model="formInline.messageSeq"
          placeholder
          clearable
          style="margin-left:-60px;width:200px"
        ></el-input
      ></el-form-item>
      <el-form-item label="消息主题">
        <br />
        <br /><el-input
          v-model="formInline.messageTitle"
          placeholder
          clearable
          style="margin-left:-60px;width:200px"
        ></el-input
      ></el-form-item>
      <el-form-item label="创建时间">
        <br />
        <br />
        <el-date-picker
          v-model="formInline.createTimeRange"
          style="margin-left:-60px;width:430px"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @focus="focusPickerDate"
        ></el-date-picker>
      </el-form-item>

      <el-form-item style="margin-left:700px;text-align:right"
        ><el-button
          type="primary"
          @click="search()"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <el-button
          type="primary"
          @click="toAdd()"
          icon="el-icon-edit"
          size="mini"
          >新增</el-button
        ></el-form-item
      >
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      v-loading="loading"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      ></el-table-column>

      <el-table-column
        prop="messageSeq"
        label="推送编号"
        width
        align="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="messageTitle"
        label="消息主题"
        width
        align="left"
      ></el-table-column>

      <el-table-column prop="status" label="发布状态" width align="left">
        <template slot-scope="scope">
          <span v-if="scope.row.status != null">{{
            scope.row.status === 1 ? '发布' : '未发布'
          }}</span>
          <span v-if="scope.row.status == null">-</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="userName"
        label="创建人"
        width
        align="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width
        align="left"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="seedetail(scope.row)"
            >查看详情</el-button
          >
          <el-button type="text" size="mini" @click="toEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="updatePrize(scope.row.uuid, '1')"
            v-if="scope.row.status == 0"
            >发布</el-button
          >
          <el-button
            type="text"
            @click="updatePrize(scope.row.uuid, '0')"
            v-if="scope.row.status == 1"
            >撤回</el-button
          >
          <!-- <el-button type="text" size="mini" @click="handledelete(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-form :inline="true" :model="formInline"
      ><el-form-item style="margin-top: 6px;"></el-form-item
    ></el-form>
    <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisibleImg" width="60%">
      <el-form
        :inline="true"
        :model="formInlineone"
        class="demo-form-inline"
        @keyup.enter.native="search()"
      >
        <el-form-item label="店铺授权编码"
          ><el-input
            v-model="formInlineone.authCode"
            placeholder
            clearable
          ></el-input
        ></el-form-item>
        <el-form-item label="店铺名称"
          ><el-input
            v-model="formInlineone.storeName"
            placeholder
            clearable
          ></el-input
        ></el-form-item>
        <el-form-item label="营销区域名称"
          ><el-input
            v-model="formInlineone.baseName"
            placeholder
            clearable
          ></el-input
        ></el-form-item>
        <el-form-item label="大区名称"
          ><el-input
            v-model="formInlineone.upOrgZone"
            placeholder
            clearable
          ></el-input
        ></el-form-item>
        <el-form-item label="查询时间：">
          <el-date-picker
            v-model="formInlineone.createTimeRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @focus="focusPickerDateone"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          ><el-button
            type="primary"
            @click="searchone()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          ></el-form-item
        >
        <el-form-item
          ><el-button
            type="primary"
            @click="kongone()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          ></el-form-item
        >
        <el-form-item
          ><el-button
            type="primary"
            @click="queryUserMessageInfoExcel()"
            icon="el-icon-edit"
            size="mini"
            >导出</el-button
          ></el-form-item
        >
      </el-form>
      <el-table
        :data="tableDataone"
        style="width: 100%;margin-bottom: 20px;"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        v-loading="loading"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        ></el-table-column>

        <el-table-column
          prop="upOrgZone"
          label="大区名称"
          width
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="baseName"
          label="营销区域名称"
          width
          align="left"
        ></el-table-column>

        <el-table-column
          prop="authCode"
          label="店铺授权编码"
          width
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="storeName"
          label="店铺名称"
          width
          align="left"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="createTime"
          label="查看时间"
          width
          align="left"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChangeone"
          @current-change="handleCurrentChangeone"
          :page-sizes="[10, 20, 30, 50, 100]"
          :current-page="listQueryone.current"
          :page-size="listQueryone.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalone"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

import {
  queryPrize,
  addPrize,
  deletePrize,
  updatePrize,
  queryUserMessageInfo,
  queryUserMessageInfoExcel,
} from '@/api/messageNotification';
import imageUpload from '@/page/common/Image-upload';
import qs from 'qs';
const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = curDate.getDate();
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      tableData: [],
      tableDataone: [],
      loading: true,
      disabled: false,
      flag: true,
      col: [
        // {
        //   label: '序号',
        //   prop: 'index'
        // },
        {
          label: '奖品编码',
          prop: 'prizeCode',
        },
        {
          label: '奖品名称',
          prop: 'prizeName',
        },
        {
          label: '奖品描述',
          prop: 'prizeInfo',
        },
        {
          label: '奖品图片',
          prop: 'prizePicture',
        },
        {
          label: '奖品类型',
          prop: 'prizeType',
        },
      ],
      dropCol: [
        // {
        //     label: '序号',
        //     prop: 'index'
        //   },
        {
          label: '奖品编码',
          prop: 'prizeCode',
        },
        {
          label: '奖品名称',
          prop: 'prizeName',
        },
        {
          label: '奖品描述',
          prop: 'prizeInfo',
        },
        {
          label: '奖品图片',
          prop: 'prizePicture',
        },
        {
          label: '奖品类型',
          prop: 'prizeType',
        },
      ],
      typeOptions: [
        { value: '1', label: '虚拟奖品' },
        { value: '2', label: '实物奖品' },
      ],
      total: 0,
      totalone: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      listQueryone: {
        current: 1,
        size: 10,
      },
      messageId: '',
      dialogVisibleImg: false,
      dialogImageUrl: '',
      formInline: {
        messageSeq: '',
        messageTitle: '',
        createTimeRange: ['', ''],
      },
      formInlineone: {
        authCode: '',
        storeName: '',
        baseName: '',
        upOrgZone: '',
        createTimeRange: ['', ''],
      },
      rules: {},
    };
  },
  mounted() {
    this.getDataList();
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    // this.columnDrop();
  },
  components: {
    imageUpload,
  },
  created() {},
  methods: {
    queryUserMessageInfoExcel() {
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        condition: {
          authCode: this.formInlineone.authCode,
          storeName: this.formInlineone.storeName,
          baseName: this.formInlineone.baseName,
          upOrgZone: this.formInlineone.upOrgZone,
          beginDate:
            this.formInlineone.createTimeRange[0] == ''
              ? null
              : this.formInlineone.createTimeRange[0],
          endDate:
            this.formInlineone.createTimeRange[1] == ''
              ? null
              : this.formInlineone.createTimeRange[1],
          messageId: this.messageId,
          //   status: 1
        },
      };
      queryUserMessageInfoExcel(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '消息列表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    seedetail(v) {
      this.messageId = v.uuid;
      this.dialogVisibleImg = !this.dialogVisibleImg;

      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        condition: {
          messageId: this.messageId,

          //   status: 1
        },
      };
      queryUserMessageInfo(data).then((res) => {
        this.loading = false;
        this.totalone = res.total;
        this.tableDataone = res.records;
      });
    },
    _queryUserMessageInfo() {
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        condition: {
          messageId: this.messageId,

          //   status: 1
        },
      };
      queryUserMessageInfo(data).then((res) => {
        this.loading = false;
        this.totalone = res.total;
        this.tableDataone = res.records;
      });
    },
    searchone() {
      this.loading = true;
      this.listQueryone.current = 1;
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        condition: {
          authCode: this.formInlineone.authCode.trim(),
          storeName: this.formInlineone.storeName.trim(),
          baseName: this.formInlineone.baseName.trim(),
          upOrgZone: this.formInlineone.upOrgZone.trim(),
          beginDate:
            this.formInlineone.createTimeRange[0] == ''
              ? null
              : this.formInlineone.createTimeRange[0],
          endDate:
            this.formInlineone.createTimeRange[1] == ''
              ? null
              : this.formInlineone.createTimeRange[1],
          messageId: this.messageId,
          //   status: 1
        },
      };
      queryUserMessageInfo(data).then((res) => {
        this.loading = false;
        this.totalone = res.total;
        this.tableDataone = res.records;
      });
    },
    kong() {
      this.formInline.messageSeq = '';
      this.formInline.messageTitle = '';
      this.formInline.createTimeRange = ['', ''];
    },

    kongone() {
      this.formInlineone.authCode = '';
      this.formInlineone.storeName = '';
      this.formInlineone.baseName = '';
      this.formInlineone.upOrgZone = '';
      this.formInlineone.createTimeRange = ['', ''];
    },
    focusPickerDate() {
      this.formInline.createTimeRange = [curDateStr(), curDateStr()];
    },
    focusPickerDateone() {
      this.formInlineone.createTimeRange = [curDateStr(), curDateStr()];
    },
    updatePrize(uuid, status) {
      var msg = '';
      if (status == '1') {
        msg = '发布';
      } else if (status == '0') {
        msg = '撤回';
      }
      this.$confirm('确定' + msg + '当前消息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status,
          };
          updatePrize(data).then((res) => {
            if (res.code == '1') {
              this.$message({
                showClose: true,
                message: msg + '成功',
                type: 'success',
              });
              this.getDataList();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error',
              });
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },

    search() {
      this.loading = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          messageSeq: this.formInline.messageSeq.trim(),
          messageTitle: this.formInline.messageTitle.trim(),
          beginDate:
            this.formInline.createTimeRange[0] == ''
              ? null
              : this.formInline.createTimeRange[0],
          endDate:
            this.formInline.createTimeRange[1] == ''
              ? null
              : this.formInline.createTimeRange[1],
          //   status: 1
        },
      };
      queryPrize(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    handledelete(v) {
      let data = {
        uuid: v.uuid,
      };
      this.$confirm('确认删除吗？').then((_) => {
        deletePrize(data).then((res) => {
          this.$message({
            showClose: true,
            message: res.message,
            type: res.code == 1 ? 'success' : 'error',
          });
          this.getDataList();
        });
      });
    },
    toAdd() {
      this.$router.push({
        name: 'messageNotificationEdit',
        params: {},
      });
    },
    toEdit(item) {
      this.$router.push({
        name: 'messageNotificationEdit',
        params: {
          edit: item,
        },
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getDataList();
    },
    handleSizeChangeone(val) {
      this.listQueryone.size = val;
      this._queryUserMessageInfo();
    },
    handleCurrentChangeone(val) {
      this.listQueryone.current = val;
      this._queryUserMessageInfo();
    },
    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          //   status: 1
        },
      };
      queryPrize(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
  width: 100%;
}
</style>
